<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .body{
            width: 400px;
            height: auto;
            background-color: #f5f5f5;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            
        }
        .box {
            width: 180px;
            height: 250px;
            background-color: white;
            border-radius: 5px;
            /* outline: 2px solid red; */
            margin: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

         .boxImg {
            width: 180px;
            height: 180px;
            background-color: #fbfbfb;
            border-radius: 5px 5px 0 0;
        }

        img {
            width: 120px;
            height: 120px;
            margin: 30px;
        }

        .money {
            width: 180px;
            height: 20px;
            color: orangered;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .new {
            width: 30px;
            height: 20px;
            outline: 1px solid orangered;
            border-radius: 180px;
            font-size: 13px;
            color: orangered;
            text-align: center;
        }

        .same {
            width: 40px;
            height: 20px;
            outline: 1px solid #cccccc;
            color: #cccccc;
            font-size: 13px;
            text-align: center;
            border-radius: 180px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="app">
            <maxbox :minbox="box"></maxbox>
        </div>
        

    </div>

    <script src="../vue.js"></script>
    <template id="maxbox">
        <div class="body">
            <div class="box" v-for="(item,index) in minbox" :key="item.id" >
                <div class="boxImg">
                    <img :src="item.img" alt="">
                </div>
                <p> {{item.name}}</p>
                <div class="money">
                    <p>{{item.price}}</p>
                    <div class="new">{{item.new}}</div>
                    <div class="same">{{item.same}}</div>
                </div>
            </div>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    box:[{
                        id:1,
                        name:'小米',
                        img:'./QQ图片20220528215957.jpg',
                        price:'￥5999起',
                        new:'上新',
                        same:'看相似',
                    },
                    {
                        id:2,
                        name:'手表',
                        img:'./QQ图片20220528215957.jpg',
                        price:'￥5999起',
                        new:'上新',
                        same:'看相似',
                    },
                    {
                        id:3,
                        name:'手机',
                        img:'./QQ图片20220528215957.jpg',
                        price:'￥5999起',
                        new:'上新',
                        same:'看相似',
                    },
                    {
                        id:4,
                        name:'家居',
                        img:'./QQ图片20220528215957.jpg',
                        price:'￥5999起',
                        new:'上新',
                        same:'看相似',
                    },]
                }
            },
            methods: {

            },
            components: {
                'maxbox': {
                    template: '#maxbox',
                    data() {
                        return {
                            
                        }
                    },
                    methods: {

                    },
                    props:['minbox']
                },
            }
        })
    </script>
</body>

</html>